<template>
  <div class="preview-nav">
    <tiny-nav-menu :data="menuData">
      <template #toolbar>
        <tiny-icon-administrator class="icon-administrator"></tiny-icon-administrator>
        <tiny-icon-setting class="icon-setting"></tiny-icon-setting>
      </template>
    </tiny-nav-menu>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { NavMenu as TinyNavMenu } from '@opentiny/vue'
import { iconSetting, iconAdministrator } from '@opentiny/vue-icon'

const menuData = ref([
  {
    title: '首页',
    url: ''
  
  },
  {
    title: '车辆展示',
    url: '/SeeCar',
  },
      {
        title: '用户中心',
        url: '',
        
      },
     
      
    
    
  {
    title: '会员管理',
    url: '',
    
      },
    
     
  
  {
    title: '库存管理',
    url: '',
   
      },
      
  {
    title: '留言反馈',
    url: '',
  },
 

  
])

const TinyIconSetting = iconSetting()
const TinyIconAdministrator = iconAdministrator()


</script>

<script>
export default {
  mounted(){
    const elements = document.getElementsByClassName('icon-administrator');
    elements[0].addEventListener('click',this.handleClick);

 
  },

  methods:{
    handleClick(){
    this.$router.push('/login')
  
     
}
  }
}
</script>

<style>

.preview-nav {
  min-height: 450px;
  padding: 0;
  margin: 0;
}

.preview-nav .slot-toolbar {
  height: 48px;
  line-height: 48px;
  vertical-align: middle;
}

.preview-nav .icon-setting, .preview-nav .icon-administrator{
  margin-right:20px;
  fill: white;
  font-size: 24px;
}
</style>
